<!-- 模块说明 -->

<template>
  <div>
    <Forms 
      :form-options="data.options"
      @getForms="(_d) => (data.formRefs = _d)"
      :config="data.formConfig"
    >
      <template #diySolt>
        插槽名称就是字段名称
      </template>
    </Forms>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { Edit, Search } from '@element-plus/icons-vue'

const data = reactive({
  formConfig: { inline: true, labelWidth: '120px', formItemWidth: '30%' },
  formRefs: {},
  options: [
    {
      type: 'input',
      label: '输入框',
      prop: 'input'
    },
    {
      type: 'inputNumber',
      label: '数字输入框',
      prop: 'inputNumber',
      attrs: {
        //属性写这里
        min: 1,
        max: 10
      },
      attrsFun: {
        //方法写这里
        change: (e) => {
          console.log(e)
        }
      }
    },
    {
      type: 'select',
      label: '下拉框',
      prop: 'select',
      attrs: {
        clearable: true
      },
      option: {
        type: 'option',
        data: [{ label: '张三', value: 'zhangsan' }, { label: '李四', value: 'lisi' }]
      }
    },
    {
      type: 'radioGroup',
      label: '单选框',
      prop: 'radioGroup',
      option: {
        type: 'radio',
        data: [{ label: '张三', value: 'zhangsan' }, { label: '李四', value: 'lisi' }]
      }
    },
    {
      type: 'rate',
      label: '评分',
      prop: 'rate',
      attrs: {
        colors: 5
      }
    },
    {
      type: 'slider',
      label: '滑块',
      prop: 'slider'
    },
    {
      type: 'switch',
      label: '开关',
      prop: 'switch'
    },
    {
      type: 'checkbox-group',
      label: '多选框',
      prop: 'checkboxGroup',
      formItemWidth: '100%',
      option: {
        type: 'checkbox',
        data: [{ label: '张三', value: 'zhangsan' }, { label: '李四', value: ';lisi' }, { label: '王五', value: 'wangwu' }, { label: '王五1', value: 'wangwu1' }, { label: '王五2', value: 'wangwu2' }]
      }
    },
    {
      type: 'date-picker',
      label: '时间选择',
      prop: 'datePicker'
    },
    {
      type: 'date-picker',
      label: '时间选择',
      dateType: 'daterange',
      prop: 'promisePayDate', //随便写但同一个form不允许重复
      mapping: ['promisePayDateStart', 'promisePayDateEnd']//返回字段的映射值
    },
    {
      type: 'diySolt',
      label: '自定义插槽',
      prop: 'diySolt'
    },
    {
      type: 'button',
      label: '按钮',
      formItemWidth: '100%',
      options: [
        {
          text: '默认按钮'
        },
        {
          text: 'Primary',
          type: 'primary'
        },
        {
          text: 'Success',
          type: 'success'
        },
        {
          text: 'Info',
          type: 'info'
        },
        {
          type: 'danger',
          icon: Search,
          attrs: {
            circle: true
          }
        },
        {
          text: 'Warning',
          type: 'warning',
          icon: Edit
        }
      ]
    }
  ]
})

 
</script>